
<div class="flex w-full">
  <div class="group aria-disabled:select-none aria-disabled:pointer-events-none">
    <div class="relative">
      <div class="bg-stone-200 absolute group-data-[completed=true]:bg-secondary"></div>
      <span class="relative z-10 grid place-items-center rounded-full bg-stone-200 text-surface-foreground group-data-[active=true]:bg-secondary group-data-[active=true]:text-secondary-foreground group-data-[completed=true]:bg-secondary group-data-[completed=true]:text-secondary-foreground h-3 w-3"></span>
    </div>
    <div class="text-stone-600 -translate-y-1.5">
      <p class="font-sans antialiased text-base text-stone-800 dark:text-white font-bold">Timeline Title Here.</p>
      <small class="font-sans antialiased text-sm mt-2 text-stone-600">The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I'm never giving up, I'm just getting started. I'm up to something. Fan luv.</small>
    </div>
  </div>
  <div class="group aria-disabled:select-none aria-disabled:pointer-events-none">
    <div class="relative">
      <div class="bg-stone-200 absolute group-data-[completed=true]:bg-secondary"></div>
      <span class="relative z-10 grid place-items-center rounded-full bg-stone-200 text-surface-foreground group-data-[active=true]:bg-secondary group-data-[active=true]:text-secondary-foreground group-data-[completed=true]:bg-secondary group-data-[completed=true]:text-secondary-foreground h-3 w-3"></span>
    </div>
    <div class="text-stone-600 -translate-y-1.5">
      <p class="font-sans antialiased text-base text-stone-800 dark:text-white font-bold">Timeline Title Here.</p>
      <small class="font-sans antialiased text-sm mt-2 text-stone-600">The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I'm never giving up, I'm just getting started. I'm up to something. Fan luv.</small>
    </div>
  </div>
  <div class="group aria-disabled:select-none aria-disabled:pointer-events-none">
    <div class="relative">
      <span class="relative z-10 grid place-items-center rounded-full bg-stone-200 text-surface-foreground group-data-[active=true]:bg-secondary group-data-[active=true]:text-secondary-foreground group-data-[completed=true]:bg-secondary group-data-[completed=true]:text-secondary-foreground h-3 w-3"></span>
    </div>
    <div class="text-stone-600 -translate-y-1.5">
      <p class="font-sans antialiased text-base text-stone-800 dark:text-white font-bold">Timeline Title Here.</p>
      <small class="font-sans antialiased text-sm mt-2 text-stone-600">The key to more success is to have a lot of pillows. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I'm never giving up, I'm just getting started. I'm up to something. Fan luv.</small>
    </div>
  </div>
</div>
